<template>
  <a-modal
    :open="open"
    width="800px"
    :title="rowData?.lsh ? '修改防疫预案' : '新增防疫预案'"
    centered
    :ok-button-props="{ disabled: !isCompleted }"
    ok-text="保存"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-form class="form-style-flex" name="validate_other" :model="formState">
      <a-form-item label="预案文档" class="w-full">
        <div class="flex items-center">
          <div class="mr-10">
            <!-- :show-upload-list="false" -->
            <a-upload :file-list="fileList" accept=".doc,.docx,.pdf,.xls,.xls,.xlsx" name="file" :custom-request="beforeUpload" @remove="handleRemove">
              <a-button> 选择文件 </a-button>
            </a-upload>
          </div>
          <!-- <div class="flex items-center">
            <span class="mr-5 cursor-pointer" style="color: #3e69f6" @click="onClickDown">{{ fileData.name }}</span>
            <CloseCircleOutlined v-if="fileData.name" class="w-[30px] h-[30px] text-red-500 cursor-pointer" @click="fileData = {}" />
          </div> -->
        </div>
      </a-form-item>
      <a-form-item label="预案标题" class="w-full" v-bind="validateInfos.planTitle">
        <a-input v-model:value="formState.planTitle" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="文档编号" class="w-1/2">
        <a-input v-model:value="formState.planNo" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="编制日期" class="w-1/2">
        <a-date-picker v-model:value="formState.preparedDate" format="YYYY-MM-DD " value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="编制单位" class="w-full">
        <a-input v-model:value="formState.preparedName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="主题词" class="w-full">
        <a-input v-model:value="formState.keyword" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="抄报单位" class="w-full">
        <a-input v-model:value="formState.cc" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="承办单位" class="w-full">
        <a-input v-model:value="formState.organizerName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="联系人" class="w-1/2">
        <a-input v-model:value="formState.contactName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="电话" class="w-1/2">
        <a-input v-model:value="formState.contactPhone" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="制表人" class="w-1/2">
        <!-- @select="onSelect($event, 'lastDirectorDoctor')" -->
        <SelectTable
          v-model:value="formState.preparedEmpName"
          type="防疫防护医生"
          @select="
            (select) => {
              formState.preparedEmpName = select?.empName
              formState.preparedEmpId = select?.empId
            }
          "
        />
      </a-form-item>
      <a-form-item label="备注" class="w-full mb-3">
        <a-textarea v-model:value="formState.memo" :rows="5" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
// import { CloseCircleOutlined } from '@ant-design/icons-vue'
import axios from 'axios'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
import useUserStore from '@/store/user'

const { empId, empName } = useUserStore()
const emit = defineEmits(['update:open', 'update:value', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const fileList = ref([])

const formState = ref({
  planTitle: '',
  preparedDate: dayjs().format('YYYY-MM-DD')
})
const rulesState = ref({
  planTitle: [{ required: true, message: '请选择预案标题' }]
})
const { isCompleted, resetFields, validateInfos } = useForm(formState, rulesState)

// 上传
const beforeUpload = async (options) => {
  const { file } = options
  const isLt2M = file.size / 1024 / 1024 < 10
  if (!isLt2M) {
    message.error('上传文件最大10MB!')
    return
  }
  // fileData.value = file
  const formData = new FormData()
  formData.append('file', file)
  const { data: res } = await axios.post('/api/v1/common/util/doUploadFile', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
  if (res.code !== 0) return message.error(res.msg)
  fileList.value = [
    {
      uid: fileList.value.length,
      name: file.name,
      status: 'done',
      url: res.data.picturePath
    }
  ]
  // res.data.fileName
  formState.value.docName = file.name
  formState.value.planTitle = file.name
  formState.value.docUrl = res.data.picturePath
}

const handleRemove = (file) => {
  const index = fileList.value.indexOf(file)
  const newFileList = fileList.value.slice()
  newFileList.splice(index, 1)
  fileList.value = newFileList
  formState.value.docName = ''
  formState.value.docUrl = ''
  formState.value.planTitle = ''
}

const onOk = async () => {
  const { code, msg } = await post('/war/epidemicPrevention/doSaveEpidemicPlan', formState.value)
  if (code !== 0) return message.error(msg)
  message.success(msg)
  emit('update:open', false)
  emit('success')
}

const onCancel = () => {
  emit('update:open', false)
  resetFields()
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = { ...props.rowData, preparedEmpName: props.rowData?.preparedEmpName || empName, preparedEmpId: props.rowData?.preparedEmpId || empId }
      !formState.value?.id && (formState.value.preparedDate = dayjs().format('YYYY-MM-DD'))
      if (formState.value.docName && formState.value.docUrl) {
        fileList.value = [
          {
            uid: fileList.value.length,
            name: formState.value.docName,
            status: 'done',
            url: formState.value.docUrl
          }
        ]
      } else {
        fileList.value = []
      }
    }
  }
)
</script>
<style lang="less" scoped>
:deep(.ant-upload-wrapper) {
  display: flex;
  .ant-upload {
    margin-right: 10px;
  }
}
</style>
